<template>
    <div class="waybillNum">
        <Chart :option="option"  v-bind="$attrs"></Chart>
    </div>
</template>
  
<script>
import Chart from "@/components/chart/chart.vue";
import { getChartData } from "@/api/echarts";
import { countinfo } from "@/api/user";

export default {
    name: "waybillNum",
    components: { Chart },
    props: [],
    data() {
        return {
            option: {},
            // 横纵坐标数据
            xAxisList: [],
            yAxisList: [],

        };
    },
    mounted() {
        this.setOption();
    },
    methods: {
        async setOption() {
            await this.getData();

            // 指定图表的配置项和数据
            this.option = {
                animation: true, // 开启动画
                animationDuration: 3000, // 动画时长为5秒
                animationEasing: 'bounceOut', // 缓动动画为bounceOut
                animationThreshold: 7, // 动画阈值为7
                tooltip: {
                    trigger: "axis",
                },
                xAxis: {
                    type: "category",
                    data: this.xAxisList,
                },
                yAxis: {
                    type: "value",
                    // scale : true,
                    axisLabel: {
                        //每个数据都加单位
                        formatter: "{value}",
                    },
                },
                grid: {
                    left: "3%",
                    right: "3%",
                    bottom: "3%",
                    top:"15px",
                    containLabel: true,
                },
                series: [
                    {
                        data: this.yAxisList,
                        type: "line",
                        smooth: true,
                        encode: {
                            x: "category",
                            y: "Income",
                            itemName: "category",
                            tooltip: ["Income"],
                        },
                    },
                ],
            };

        },
        async getData() {
            var param = {
                start_time: 0,
                end_time: 0,
            };
            const res = await countinfo(param);
            if (res.code == 10000) {
                const orderData = res.data.order_data;
                const countList = res.data.per_day_waybill_count_list;
                if (orderData != null) {
                    const perDayOrdert = orderData.per_day_order_count_list;
                    if (perDayOrdert != null) {
                        if (perDayOrdert.length > 0) {
                            for (var i = 0; i < perDayOrdert.length; i++) {
                                this.xAxisList.push(perDayOrdert[i].order_date);
                                this.yAxisList.push(perDayOrdert[i].order_count);
                            }
                            // this.texttitle = "订单数(近7天)";
                            // this.myEcharts();
                        } else {
                            this.newDate();
                            // this.myEcharts();
                        }
                    } else if (countList != null) {
                        if (countList.length > 0) {
                            for (var i = 0; i < countList.length; i++) {
                                this.xAxisList.push(countList[i].waybill_date);
                                this.yAxisList.push(countList[i].waybill_count);
                            }
                            // this.texttitle = "运单数(近7天)";
                            // this.myEcharts();
                        } else {
                            this.newDate();
                            // this.myEcharts();
                        }
                    } else {
                        this.newDate();
                        // this.myEcharts();
                    }
                }


            }
        },
        // 获取时间
        newDate() {
            // 获取当前时间戳
            const now = Date.now();
            // 一天的毫秒数
            const dayMillis = 24 * 60 * 60 * 1000;
            // 存储转换后的时间戳和日期字符串的数组
            const result = [];
            const result_time = [];
            // 循环获取前7天的时间戳并转换成日期字符串
            for (let i = 0; i < 7; i++) {
                // 计算时间戳
                const timestamp = now - i * dayMillis;
                // 转换成日期对象
                const dateObj = new Date(timestamp);
                // 获取年月日
                const year = dateObj.getFullYear();
                const month = String(dateObj.getMonth() + 1).padStart(2, "0");
                const day = String(dateObj.getDate()).padStart(2, "0");
                // 拼接成日期字符串
                const dateString = `${year}-${month}-${day}`;
                // 存储时间戳和日期字符串
                result.push({ timestamp, dateString });
                result_time.push(dateString);
            }
            this.xAxisList = result_time.reverse();
            this.yAxisList = [0, 0, 0, 0, 0, 0, 0];
        },
    },
};
</script>
<style lang="scss" scoped>
.wrapper {}
</style>
  